<template>
  <div class="player-wrap">
    <div class="player-content">
      <responsive-image :src="poster">
          <div class="player-bar">
            <span>{{duration | formatTime }}</span>
          </div>  
      </responsive-image>
      <div class="player-main" id="videoPlayer"></div>
    </div>
    <div v-if="!canPlay" class="player-mask" v-html="maskInfo"></div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { formatTime } from '@/filters/filters.js'
import Player from 'xgplayer/dist/simple_player'
import volume from 'xgplayer/dist/controls/volume'
import playbackRate from 'xgplayer/dist/controls/playbackRate'
import progress from 'xgplayer/dist/controls/progress'
import 'xgplayer-mp4'
import ResponsiveImage from '@/components/responsive-image'
export default {
  name: 'VideoPlayer',
  components: {
    ResponsiveImage
  },
  props: {
    url: {
      type: String
    },
    poster: {
      type: String
    },
    posterSize: {
      type: String,
      default: '@480w_270h'
    },
    duration: {
      type: [Number, String]
    },
    canPlay: {
      type: Boolean,
      default: true
    },
    maskInfo: {
      type: String
    }
  },
  data () {
    return {
      player: null
    }
  },
  filters: {
    formatTime
  },
  mounted () {
    this.initPlayer()
  },
  beforeDestroy () {
    this.destroyPlayer()
  },
  watch: {
    url: {
      handler (newVal) {
        this.initPlayer()
      }
    }
  },
  methods: {
    destroyPlayer() {
      this.player && this.player.destroy()
      this.player = null
    },
    initPlayer() {
      if (!this.url) {
        return
      }
      if (this.player) {
        if (this.player.hasStart) {
            this.player.pause()
            this.player.src = this.url
        } else {
            this.player.start(this.url)
        }                    
        return  
      }
      this.player = new Player({
        id: 'videoPlayer',
        preloadTime: 15,
        url: this.url,          
        fluid: true,
        'x5-video-player-type': 'h5',
        playsinline: true,
        controlPlugins: [
          volume,
          playbackRate,
          progress
        ],
        playbackRate: [0.5, 1, 1.25, 1.5, 2]
      })
      
      this.$nextTick(() => {
        this.bindEvent()
      })    
    },
    bindEvent() {
        this.player.once('bufferedChange', () => {
            Toast.loading({
              message: '视频加载中...',
              forbidClick: true
            })
        })
        this.player.once('canplay', () => {
            Toast.clear()
        })              
    }
  }
}
</script>

<style lang="scss" scoped>
  .player{
    &-wrap{
      position: relative;
      padding-top: 270/480*100%;
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
    &-content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;      
    }
    &-main {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,.1);
      ::v-deep .xgplayer-start{
        background: rgba(0,0,0,.76);
      }
    }
    &-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px;
      color: #fff;
      display: flex;
      justify-content: flex-end;
      background-image: linear-gradient(transparent 2%,rgba(0,0,0,.7) 98%);
    }
    &-mask {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 14px;
      width: 100%;
      height: 100%;
      color: $color-white;
      background-color: rgba(0,0,0,.5);
    }
  }
</style>
